import React, { useEffect, useState } from 'react';
import { Form, Input, Button } from 'antd';
import styles from './index.module.less';
import { useDispatch } from 'react-redux';
import { set_user_info } from '@/redux/slice/user';
import { useNavigate } from 'react-router-dom';
import { login } from '@/api/request';

//页面1 登录页
const COUNT = 60;
const Login: React.FC = () => {
  const [count, setCount] = useState(0);
  const [form] = Form.useForm();

  const dispatch = useDispatch();
  const navigate = useNavigate();
  const onLogin = async (value: any) => {
    //登录的信息

    const user_info: any = await login(value);

    console.log('user_info', user_info);
    dispatch(set_user_info(user_info));

    if (!user_info?.has_person_info) {
      navigate('/person_info');
    } else {
      if (user_info.role === 'student') {
        navigate('/exam_select');
      }
      if (user_info.role === 'admin') {
        //exam_select
        navigate('/corret_exam_list');
      }
      if (user_info.role === 'super_admin') {
        navigate('/admin_manage');
      }
    }
  };
  //点击发验证码触发的回调
  const startCode = () => {
    if (count !== 0) return;
    form
      .validateFields(['phone'])
      .then(() => {
        setCount(COUNT);
      })
      .catch((err) => {
        console.log('err', err);
      });
  };

  //开启倒计时
  useEffect(() => {
    setTimeout(() => {
      if (count === 0) return;
      setCount(count - 1);
    }, 1000);
  }, [count]);
  return (
    <div className={styles.wrap}>
      <div className={styles.container}>
        <div className={styles.left}></div>
        <div className={styles.right}>
          <div className={styles.imgwrap}>
            <div className={styles.title}>
              <h1>天丰考试管理系统</h1>
            </div>
          </div>
          <div className={styles.form}>
            <Form size="large" labelCol={{ span: 5 }} onFinish={onLogin} form={form}>
              <Form.Item
                label="手机号"
                name="phone"
                rules={[{ required: true, message: '请输入正确的手机号' }]}
              >
                <Input
                  placeholder="请输入手机号"
                  style={{ padding: '7px 100px 7px 11px' }}
                />
              </Form.Item>
              <div style={{ position: 'relative' }}>
                <Form.Item
                  label="验证码"
                  name="code"
                  rules={[{ required: true, message: '请输入正确的验证码' }]}
                >
                  <Input
                    placeholder="请输入验证码"
                    style={{ padding: '7px 100px 7px 11px' }}
                  />
                </Form.Item>
                <div className={styles.codebtn} onClick={startCode}>
                  {count === 0 ? '发送验证码' : `${count}秒`}
                </div>
              </div>
              <div className={styles.button}>
                <Button type="primary" htmlType="submit" style={{ width: '80%' }}>
                  登录
                </Button>
              </div>
            </Form>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Login;
